<template>
  <div class="mv-box">
    <div class="banner-image">
      <div class="image">
        <h1 class="image-title">万千歌手 尽在眼前</h1>
        <div class="image-singer">登录查看你的关注歌手</div>
        <div class="image-button">
          <div class="btn-border"></div>
          <span class="btn-text">立即登录</span>
        </div>
      </div>
      <!-- <span class="banner-text">我关注的歌手</span> -->
      <!-- <el-carousel :interval="4000" type="card" height="200px" class="swiper">
        <el-carousel-item v-for="item in 6" :key="item">
          <h3 class="medium">
            <img
              src="../../../../public/images/banner.jpg"
              alt=""
              class="cd-image"
            />
          </h3>
        </el-carousel-item>
      </el-carousel> -->
      <img src="../../../../public/images/banner.jpg" alt="" class="cd-image" />
    </div>

    <div class="container">
      <div class="mv-title">
        <div class="mv-list">
          <span
            class="title"
            v-for="(item, index) in indexList"
            :key="item.id"
            @click="addCurrent(index)"
            ><a href="#" :class="currentIndex === index ? 'active' : ''">{{
              item.name
            }}</a></span
          >
        </div>

        <div class="mv-list">
          <span
            class="title"
            v-for="(area, index) in areaList"
            :key="area.id"
            @click="addCurrent1(index)"
            ><a href="#" :class="currentIndex1 === index ? 'active' : ''">{{
              area.name
            }}</a></span
          >
          <!-- <div class="option">
          <span><a href="#">内地</a></span>
          <span><a href="#">内地</a></span>
          <span><a href="#">内地</a></span>
          <span><a href="#">内地</a></span>
          <span><a href="#">内地</a></span>
        </div> -->
        </div>

        <div class="mv-list">
          <span
            class="title"
            v-for="(sex, index) in sexList"
            :key="sex.id"
            @click="addCurrent2(index)"
            ><a href="#" :class="currentIndex2 === index ? 'active' : ''">{{
              sex.name
            }}</a></span
          >
        </div>

        <div class="mv-list">
          <span
            class="title"
            v-for="(genre, index) in genreList"
            :key="genre.id"
            @click="addCurrent3(index)"
            ><a href="#" :class="currentIndex3 === index ? 'active' : ''">{{
              genre.name
            }}</a></span
          >
        </div>
      </div>
      <div class="con-box">
        <div
          class="image-box"
          v-for="singer in singerList"
          :key="singer.singer_id"
        >
          <router-link to="/singerList"
            ><img :src="singer.singer_pic" alt="" class="mv-image"
          /></router-link>
          <span class="image-text">{{ singer.singer_name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Singer",
};
</script>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getSingerListApi } from "../../../api/mv";

const currentIndex = ref(0);

const currentIndex1 = ref(0);

const currentIndex2 = ref(0);

const currentIndex3 = ref(0);

const addCurrent = (index: any) => {
  currentIndex.value = index;
};
const addCurrent1 = (index: any) => {
  currentIndex1.value = index;
};

const addCurrent2 = (index: any) => {
  currentIndex2.value = index;
};

const addCurrent3 = (index: any) => {
  currentIndex3.value = index;
};

const singerList = ref<any>([]);
const areaList = ref<any>([]);
const genreList = ref<any>([]);
const indexList = ref<any>([]);
const sexList = ref<any>([]);
onMounted(async () => {
  const res = await getSingerListApi();
  // console.log(res.singerList.data.singerlist);
  singerList.value = res.singerList.data.singerlist;
  areaList.value = res.singerList.data.tags.area;
  genreList.value = res.singerList.data.tags.genre;
  indexList.value = res.singerList.data.tags.index;
  sexList.value = res.singerList.data.tags.sex;
  console.log(res.singerList.data.tags);
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
a {
  /* color: #000; */
  text-decoration: none;
}
.active {
  background-color: #31c27c;
  color: #fff !important;
}
.mv-box {
  height: 100%;
  background-color: #fff;
}
.banner-image {
  position: relative;
  width: 100%;
  height: 376px;
  /* background-color: blue; */
}
.image {
  position: absolute;
  width: 1200px;
  height: 170px;
  /* background-color: red; */
  top: 40%;
  left: 50%;
  margin-left: -600px;
  margin-top: -85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: #fff;
}
.cd-image {
  width: 100%;
}
.image-title {
  font-size: 60px;
  font-weight: 100;
  margin-bottom: 10px;
}
.image-button {
  position: relative;
  width: 174px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  margin-top: 20px;
}
.btn-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 174px;
  height: 48px;
  border: 1px solid #fff;
  opacity: 0.2;
  transition-property: opacity;
  transition-duration: 0.5s;
}
.btn-border:hover {
  opacity: 1;
  cursor: pointer;
}
.btn-text {
  color: #fff;
}
.container {
  width: 1200px;
  margin: 0 auto;
  /* background-color: yellow; */
}
.mv-title {
  width: 1160px;
  height: 172px;
  box-sizing: border-box;
  background-color: #fbfbfd;
  margin: 30px 0 20px 40px;
}
.mv-list {
  display: flex;
}

.title {
  width: 36px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  padding: 0 2px;
  margin-top: 15px;
  font-size: 12px;
}
.title a {
  width: 46px;
  display: inline-block;
  color: #000;
}
.title a:hover {
  color: #31c27c;
}
.image-singer {
  font-size: 24px;
  font-weight: 100;
}
.title:nth-child(1) {
  width: 40px;
  height: 30px;
  /* background-color: #31c27c; */
  margin-right: 12px;
}
.title:nth-child(1) a {
  color: #000;
}
.option {
  height: 30px;
  line-height: 30px;
  /* background-color: red; */
  margin: 15px 0;
}
.option span {
  padding: 10px 15px;
}

.con-box {
  width: 1200px;
  /* border: 1px solid red; */
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* background-color: #fdfdfd; */
}
.mv-image {
  width: 150px;
  height: 150px;
  margin-top: 30px;
  border-radius: 50%;
}
.banner-text {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 30px;
  top: 15%;
  left: 50%;
  margin-left: -50px;
  color: #fff;
}
.swiper {
  position: absolute;
  width: 500px;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -80px;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.swiper-image {
  width: 200px;
  height: 200px;
}
.image-box {
  width: 224px;
  height: 224px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fbfbfd;
  margin-top: 30px;
}
.image-text {
  margin-top: 20px;
}
</style>
